{include file="../common/header"}
<!--页面主要内容-->
<main class="lyear-layout-content">
  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-toolbar d-flex flex-column flex-md-row">
            <div class="toolbar-btn-action">
              <button class="btn btn-primary m-r-5" data-toggle="modal" data-target="#exampleModal"><i class="mdi mdi-plus"></i> 新增</button>
              <a class="btn btn-danger" onclick="delshoptotal()"><i class="mdi mdi-window-close"></i> 删除</a>
            </div>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">新增商品</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group" >
                      <label for="shopname">商品名称</label>
                      <input type="text" class="form-control" id="shopname" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group file-group">
                      <label for="shopimg">商品图片</label>
                      <div class="input-group">
                        <input type="text" id="shopimg" class="form-control file-value" name="shopimg" value="" placeholder="商品图片">
                        <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif" style="display: none">
                        <div class="input-group-btn">
                          <button class="btn btn-default file-browser" type="button">上传图片</button>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="shoptype">商品类型</label>
                      <select id="shoptype" class="form-control">
                        <option value="1">兑换会员</option>
                        <option value="2">其他类型</option>
                      </select>
                    </div>
                    <div class="form-group" >
                      <label for="money">消耗金币数</label>
                      <input type="email" class="form-control" id="money" placeholder="请输入消耗金币数">
                    </div>
                    <div class="form-group" >
                      <label for="vipnum">会员天数</label>
                      <input type="email" class="form-control" id="vipnum" placeholder="请输入会员天数(其他类型可不填)">
                    </div>
                    <div class="form-group" >
                      <label for="inventory">库存数量</label>
                      <input type="email" class="form-control" id="inventory" placeholder="请输入库存数量">
                    </div>
                    <div class="form-group" >
                      <label for="appid">appid</label>
                      <input type="text" class="form-control" id="appid" placeholder="请输入应用id">
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="shutdown" data-dismiss="modal">关闭</button>
                    <button type="button" id="addbtn" onclick="addshop()" class="btn btn-primary">保存</button>
                  </div>
                </div>
              </div>
            </div>

<!--            <div class="search-bar ml-md-auto">-->
<!--              <input type="hidden" name="search_field" id="search-field" value="title" />-->
<!--              <div class="input-group ml-md-auto">-->
<!--                <div class="input-group mb-3">-->
<!--                  <input type="text" id="searchusername" class="form-control" placeholder="请输入用户名">-->
<!--                  <div class="input-group-append">-->
<!--                    <span class="input-group-text" onclick="searchuser()">搜索</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <div class="card-body">

            <div class="table-responsive">
              <table class="table table-bordered" id="search_result">
                <thead>
                <tr>
                  <th>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="check-all">
                      <label class="custom-control-label" for="check-all"></label>
                    </div>
                  </th>
                  <th>序号</th>
                  <th>商品名称</th>
                  <th>商品图片</th>
                  <th>商品类型</th>
                  <th>应用名称</th>
                  <th>价格</th>
                  <th>销量</th>
                  <th>库存</th>
                  <th>数量</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="shop" key="u"}
                <tr id="{$shop.id}">
                  <td>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input ids" name="ids[]" value="{$shop.id}" id='ids{$shop.id}'>
                      <label class="custom-control-label" for="ids{$shop.id}"></label>
                    </div>
                  </td>
                  <td>{$u}</td>
                  <td>{$shop.shopname}</td>
                  <th><img src="{$shop.shopimg}" style="cursor: pointer;" class="imgurl" width="50px"/></th>
                  <td>{if $shop['shoptype'] == '1' } 会员类型 {else /} 其他类型 {/if}</td>
                  <td>{$shop.appname}</td>
                  <td>{$shop.money}</td>
                  <td>{$shop.sales}</td>
                  <td>{$shop.inventory}</td>
                  <td>{$shop.vipnum}</td>
                  <td>{$shop.creat_time}</td>
                  <td>
                    <div class="btn-group">
<!--                      <a class="btn btn-xs btn-default" href='/admin/user/queryuser/id/{$shop.id}' title="" data-toggle="tooltip" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a>-->
                      <a class="btn btn-xs btn-default id ajax-get confirm" dataid = "{$shop.id}" onclick="deleteshop(this)" title="" data-toggle="tooltip" data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                    </div>
                  </td>
                </tr>
                {/volist}
                </tbody>
              </table>
            </div>
            {$page|raw}
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<!--End 页面主要内容-->
</div>
</div>
{include file="../common/footer"}
<script>
  function getnumber() {
    var date = $("input[name = 'ids[]']");
    var str = [];
    for(let i = 0;i < date.length;i++) {
      if (date[i].checked == true) {
        str.push(date[i].value);
      }
    }
    return str;
  }

  function addshop(){
    $("#addbtn").attr('disable', 'true');
    var l = $("#addbtn").lyearloading({
      opacity: 0.2,
      spinnerSize: 'nm'
    });
    var shopname = $.trim($("#shopname").val());
    var shoptype = $.trim($("#shoptype").val());
    var money = $.trim($("#money").val());
    var vipnum = $.trim($("#vipnum").val());
    var inventory = $.trim($("#inventory").val());
    var appid = $.trim($("#appid").val());
    var shopimg = $.trim($("#shopimg").val());
    $.ajax({
      type: "POST",
      url: "{:url('/admin/shop/addshop')}",
      data: {
        shopname: shopname,
        shoptype: shoptype,
        money: money,
        vipnum: vipnum,
        inventory: inventory,
        appid: appid,
        shopimg: shopimg
      },
      dataType: "json",
      success: function (data) {
        $("#shutdown").click();
        setTimeout(function () {
          l.destroy();}, 1e3)
        if (data.code == 200){
          $.notify({
            message: data.msg
          },{
            placement: {
              from: "top",
              align: "center"
            },
            type: 'success'
          });
          setTimeout("location.reload();", 1000);
        }else{
          $.notify({
            message: data.msg
          },{
            placement: {
              from: "top",
              align: "center"
            },
            // settings
            type: 'danger'
          });
        }
      }
    })
  }

  function deleteshop(obj){
    var l = $('body').lyearloading({
      opacity: 0.2,
      spinnerSize: 'lg',
      spinnerText: '后台处理中，请稍后...',
      textColorClass: 'text-info',
      spinnerColorClass: 'text-info'
    });
    var id = $(obj).attr("dataid");
    $.ajax({
      type: "POST",
      url: "{:url('/admin/shop/delshop')}",
      data: {
        id: id,
      },
      //dataType: "json",
      success: function (data) {
        setTimeout(function() {
          l.destroy();
        }, 1e3)
        if (data.code == 200) {
          $.notify({
            message: data.msg
          },{
            placement: {
              from: "top",
              align: "center"
            },
            type: 'success'
          });
          setTimeout("location.reload();", 2000);
        } else {
          $.notify({
            message: data.msg
          },{
            placement: {
              from: "top",
              align: "center"
            },
            // settings
            type: 'danger'
          });
        }
      },
    });
  }

  function delshoptotal(){
    var getnum = getnumber().toString();
    console.log(getnum);
    if (getnum.length == 0){
      $.notify({
        message: "你还没有选择呢",
      },{
        placement: {
          from: "top",
          align: "center"
        },
        type: 'success'
      });
    }else{
      var l = $('body').lyearloading({
        opacity: 0.2,
        spinnerSize: 'lg',
        spinnerText: '后台处理中，请稍后...',
        textColorClass: 'text-info',
        spinnerColorClass: 'text-info'
      });
      $.ajax({
        type: "POST",
        url: "{:url('/admin/shop/delshop')}",
        data: {
          id: getnum
        },
        dataType: "json",
        success: function (data) {
          setTimeout(function() {
            l.destroy();
          }, 1e3)
          if (data.code == 200) {
            $.notify({
              message: data.msg
            },{
              placement: {
                from: "top",
                align: "center"
              },
              type: 'success'
            });
            setTimeout("location.reload();", 2000);
          } else {
            $.notify({
              message: data.msg
            },{
              placement: {
                from: "top",
                align: "center"
              },
              // settings
              type: 'danger'
            });
          }
        },
      });
    }
  }

  function searchuser(){
    var searchusername = $.trim($("#searchusername").val());
    if (searchusername == "" || searchusername == null){
      $.notify({
        message: '请输入搜索内容'
      },{
        placement: {
          from: "top",
          align: "center"
        },
        // settings
        type: 'danger'
      });
      return false;
    }
    var l = $('body').lyearloading({
      opacity: 0.2,
      spinnerSize: 'lg',
      spinnerText: '后台处理中，请稍后...',
      textColorClass: 'text-info',
      spinnerColorClass: 'text-info'
    });
    $.ajax({
      type: "POST",
      url: "/admin/user/searchuser",
      data: {
        searchusername: searchusername,
      },
      dataType: "json",
      success: function (json) {
        setTimeout(function() {
          l.destroy();
        }, 1e3)
        if (json.code == 200){
          var s = "<thead><tr><th>ID</th><th>用户名</th><th>昵称</th><th>应用名称</th><th>创建时间</th><th>操作</th></tr></thead><tbody>";
          for (var i = 0;i<json.data.length;i++) {
            s += '<tr><td>' +
                    json.data[i].id +
                    "</td><td>" +
                    json.data[i].username +
                    "</td><td>" +
                    json.data[i].nickname +
                    "</td><td>" +
                    json.data[i].appname +
                    "</td><td>" +
                    json.data[i].time +
                    '</td><td><div class="btn-group"> <a class="btn btn-xs btn-default" href="/admin/user/queryuser/id/'+
                    json.data[i].id +
                    '"title="" data-toggle="tooltip" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a><a class="btn btn-xs btn-default id ajax-get confirm" dataid = "'+
                    json.data[i].id +
                    '" onclick="deleteuser(this)" title="" data-toggle="tooltip" data-original-title="删除"><i class="mdi mdi-window-close"></i></a></td></tr></tbody>';
          }
          $("#search_result").html(s);
        }else{
          $.notify({
            message: data.msg
          },{
            placement: {
              from: "top",
              align: "center"
            },
            // settings
            type: 'danger'
          });
        }
      }
    })
  }

  $(document).ready(function() {
    $(document).on('click', '.file-browser', function() {
      var $browser = $(this);
      var file = $browser.closest('.file-group').find('[type="file"]');
      file.on( 'click', function(e) {
        e.stopPropagation();
      });
      file.trigger('click');
    });

    $(document).on('change', '.file-group [type="file"]', function() {
      var l = $('body').lyearloading({
        opacity: 0.2,
        spinnerSize: 'lg',
        spinnerText: '后台处理中，请稍后...',
        textColorClass: 'text-info',
        spinnerColorClass: 'text-info'
      });
      var $this    = $(this);
      var $input   = $(this)[0];
      var $len     = $input.files.length;
      var formFile = new FormData();

      if ($len == 0) {
        return false;
      } else {
        var fileAccaccept = $this.attr('accaccept');
        var fileType      = $input.files[0].type;
        var type          = (fileType.substr(fileType.lastIndexOf("/") + 1)).toLowerCase();

        if (!type || fileAccaccept.indexOf(type) == -1) {
          $.notify({
            message: '您上传图片的类型不符合(.jpg|.jpeg|.gif|.png|.bmp)',
          },{
            placement: {
              from: "top",
              align: "center"
            },
            type: 'success'
          });
          l.destroy();
          return false;
        }
        formFile.append("file", $input.files[0]);
      }

      var data = formFile;

      $.ajax({
        url: "/admin/app/upload.html",
        data: data,
        type: "POST",
        dataType: "json",
        //上传文件无需缓存
        cache: false,
        //用于对data参数进行序列化处理 这里必须false
        processData: false,
        //必须
        contentType: false,
        success: function (res) {
          setTimeout(function() {
            l.destroy();
          }, 1e3)
          if (res.code == 200) {
            $.notify({
              message: res.msg
            },{
              placement: {
                from: "top",
                align: "center"
              },
              type: 'success'
            });
            //console.log(res.data[0].filePath);
            $this.closest('.file-group').find('.file-value').val(res.data[0].fullPath);
          } else {
            $.notify({
              message: "系统错误"
            },{
              placement: {
                from: "top",
                align: "center"
              },
              // settings
              type: 'danger'
            });
          }
        },
      });
    });
  });

</script>

</body>

</html>
